import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Menu from './index'

export const defaultMenu = () => (
  <Menu onSelect={action(`clicked item`)}>
    <Menu.MenuItem>cool link</Menu.MenuItem>
    <Menu.MenuItem disabled>disabled</Menu.MenuItem>
    <Menu.MenuItem>cool link 2</Menu.MenuItem>
  </Menu>
)
export const verticalMenu = () => (
  <Menu onSelect={action(`clicked item`)} mode="vertical">
    <Menu.MenuItem>cool link</Menu.MenuItem>
    <Menu.MenuItem disabled>disabled</Menu.MenuItem>
    <Menu.MenuItem>cool link 2</Menu.MenuItem>
  </Menu>
)
export const defaultSubMenu = () => (
  <Menu onSelect={action(`clicked item`)}>
    <Menu.MenuItem>cool link</Menu.MenuItem>
    <Menu.SubMenu title="dropdown">
      <Menu.MenuItem>dropdown 1</Menu.MenuItem>
      <Menu.MenuItem disabled>dropdown 2</Menu.MenuItem>
      <Menu.MenuItem>dropdown 3</Menu.MenuItem>
    </Menu.SubMenu>
    <Menu.MenuItem>cool link 2</Menu.MenuItem>
  </Menu>
)

export const verticalSubMenu = () => (
  <div>
    <Menu onSelect={action(`clicked item`)} mode="vertical">
      <Menu.MenuItem>cool link</Menu.MenuItem>
      <Menu.SubMenu title="dropdown">
        <Menu.MenuItem>dropdown 1</Menu.MenuItem>
        <Menu.MenuItem disabled>dropdown 2</Menu.MenuItem>
        <Menu.MenuItem>dropdown 3</Menu.MenuItem>
      </Menu.SubMenu>
      <Menu.MenuItem>cool link 2</Menu.MenuItem>
    </Menu>
    <h6>Default Open SubMenu</h6>
    <Menu
      onSelect={action(`clicked item`)}
      mode="vertical"
      defaultOpenSubMenus={['1']}>
      <Menu.MenuItem>cool link</Menu.MenuItem>
      <Menu.SubMenu title="dropdown">
        <Menu.MenuItem>dropdown 1</Menu.MenuItem>
        <Menu.MenuItem disabled>dropdown 2</Menu.MenuItem>
        <Menu.MenuItem>dropdown 3</Menu.MenuItem>
      </Menu.SubMenu>
      <Menu.MenuItem>cool link 2</Menu.MenuItem>
    </Menu>
  </div>
)

storiesOf('Menu Component', module)
  .add('Default Menu', defaultMenu)
  .add('Vertical Menu', verticalMenu)
  .add('Default SubMenu', defaultSubMenu)
  .add('Vertical SubMenu', verticalSubMenu)
